<template>
	<view class="order-list-content">
		<view class="" v-if="dataList && dataList.length !== 0">
			<view class="dataList" v-for="(item, index) in dataList" :key="index" @click="clickItem(item)">
				<view class="dataList_title flexjsbac">
					<text>{{ item.storeName }}</text>
					<text
						:style="{ 'color': statusConfig[item.orderStatus].color||statusConfig['default'].color }">{{ statusConfig[item.orderStatus].title||statusConfig['default'].title }}</text>
				</view>
				<view class="technicianList flex" v-for="(tItem, tIndex) in item.zyOrderItemList" :key="tIndex">
					<u-checkbox-group>
						<u-checkbox @change="checkboxChange($event, tItem)" v-model="formData[item.key1]"
							v-if="isChecked" size='circle'></u-checkbox>
					</u-checkbox-group>
					<image class="img" mode="aspectFill"
						:src="tItem.technicianAvatar || basImgUrl + 'img_common_tech.png'" alt="" />
					<view class="flex1">
						<view class="flexjsbac technicianName">
							<text>{{ tItem.technicianName }}</text>
							<text>￥{{ tItem.paymentMoney }}</text>
						</view>
						<view class="flexjsbac list_con">
							<view class="flexJcac">
								<u-icon name="order" color="#666666" size="22"></u-icon>
								{{ tItem.itemName}}
							</view>
							<text
								:style="{ 'color': statusConfig[tItem.status].color||statusConfig['default'].color }">{{ statusConfig[tItem.status].title||statusConfig['default'].title }}</text>
						</view>
						<view class="flexjsbac list_con" v-for="(items, indexs) in tItem.zyOrderProductList"
							:key="indexs">
							<view class="flexJcac">
								<u-icon name="bag" color="#666666" size="22"></u-icon>
								{{ items.productName}} x {{ items.productNum }}
							</view>
							<text>￥{{ items.originalPrice }}</text>
						</view>
						<view class="flexjsbac">
							<view class="flexJcac">
								<u-icon name="clock" color="#666666" size="20"></u-icon>
								{{ tItem.subscribeStartTime }}
							</view>
							<!-- <view v-if="item.zyOrderItemList.length != 1"> -->
							<view class="btn" v-if="item.orderStatus == 1 && tItem.status != 5"
								@click.stop="clickOutOrder(tItem)">
								退单</view>
							<view class="btn" v-if="item.orderStatus == 3 && tItem.status == 3"
								@click.stop="clickToEvaluate(tItem)">
								去评价</view>

							<!-- </view> -->
						</view>
						<view v-if="tItem.status===5 && showRefund" class="out-money">退单金额：
							<text style="color:#FF0000">￥{{ tItem.chargeBackMoney || 0 }}</text>
						</view>
						<view v-if="tItem.status===5 && showRefund" class="out-money">扣资源占用费比例：
							<text
								style="color:#FF0000">{{ (($methods.numberSub(Number(tItem.paymentMoney), Number(tItem.chargeBackMoney))/Number(tItem.paymentMoney))*100).toFixed(0) || 0 }}%</text>
							<!-- <text
								style="color:#FF0000">{{ $methods.numberMul($methods.numberSub(1, Number(tItem.beChargebackRatio)), 100) || 0 }}%</text> -->
						</view>
						<view v-if="tItem.status===5 && showRefund" class="out-money">扣资源占用费金额：
							<text
								style="color:#FF0000">￥{{ $methods.numberSub(Number(tItem.paymentMoney), Number(tItem.chargeBackMoney)) || '' }}</text>
						</view>
						<view v-if="tItem.status===5 && showRefund" class="out-money">退单时间：
							<text style="color:#FF0000">{{ tItem.updateTime || 0 }}</text>
						</view>
					</view>
				</view>
				<view class="give-money" v-if="showDisbursements">
					<!-- <view class="time" v-if="item.orderStatus === 5">订单失效还剩{{ item.countHour }}时{{ item.countMinute }}分{{ item.countSecond }}秒</view> -->
					<view class="actual-money">
						实付款：<text
							style="color:#FF0000">￥{{ parseFloat(Number(item.actuallyMoney ||0)+Number(item.resourcesUseFee)).toFixed(2)  }}</text>
						<text v-if="item.resourcesUseFee&& item.resourcesUseFee!=0">
							{{ ' ' +` (资源占用费:${item.resourcesUseFee}元)` }}</text>
					</view>
					<view v-if="item.isPayment === 1&&item.orderSource===1">倒计时剩余时间: {{ item.countdownSeconds }}</view>
				</view>
				<view class="bottom_con">
					<view style="display: inline-block;" @click.stop="clickSlot(item, slotName)">
						<slot :name="`${slotName}${index}`"></slot>
					</view>
				</view>
			</view>
			<view style="height: 35px;"></view>
		</view>
		<view v-else class="common-no-data">
			<image class="no-data-img" :src="baseImgUrl + 'img_no_order.png'" alt="" />
			<view class="text">暂无订单</view>
		</view>
	</view>
</template>

<script>
	import pageConfig from '@/config'
	import api_order from '@/api/order'
	export default {
		name: 'OrderListComponents',
		props: {
			orderList: {
				type: Array,
				default: []
			},
			orderStatus: {
				type: Number,
				default: 0
			},
			showDisbursements: {
				type: Boolean,
				default: true
			},
			showSlotBtn: {
				type: Boolean,
				default: true
			},
			slotName: {
				type: String,
				default: 'btn'
			},
			isChecked: {
				type: Boolean,
				default: false
			},
			notClick: {
				type: Boolean,
				default: false
			},
			showRefund: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			orderList: {
				handler(newVal, oldVal) {
					this.dataList = newVal
				},
				deep: true
			}
		},

		data() {
			return {
				baseImgUrl: pageConfig.baseImgUrl,
				statusConfig: {
					0: {
						title: '待支付',
						color: '#C27E15'
					},
					1: {
						title: '待服务',
						color: '#C27E15'
					},
					2: {
						title: '服务中',
						color: '#FF0000'
					},
					3: {
						title: '待评价',
						color: '#FF0000'
					},
					4: {
						title: '已完成',
						color: '#FF0000'
					},
					5: {
						title: '已退单',
						color: '#FF0000'
					},
					'default': {
						title: '--',
						color: '#666999'
					},
				},
				formData: [],
				dataList: [],
				evaluateList: []
			}
		},
		created() {
			this.dataList = this.orderList
		},
		mounted() {
			if (this.orderStatus == 0) {
				this.startCountdown()
			}
		},
		methods: {
			startCountdown() {
				this.dataList.forEach(item => {
					if (item.orderSource == 1) {
						const timer = setInterval(() => {
							if (item.countdownSeconds > 0) {
								item.countdownSeconds--
							} else {
								clearInterval(timer)
								this.countdownFinish(item.id, item.isPayment)
							}
						}, 1000)
					}
				})
			},
			countdownFinish(itemId, isPayment) {
				this.$emit('countdownFinished', itemId, isPayment)
				// api_order.orderdelete(itemId).then(res=>{
				// 	// this.dataList = this.orderList
				// })
				// 在这里可以根据ID执行相应的逻辑
			},
			checkboxChange(e, item) {
				if (e) {
					this.formData.push(item)
				} else {
					let el = this.formData.find(itm => itm.id === item.id)
					if (el) this.formData.splice(this.formData.indexOf(el), 1)
				}
			},
			clickItem(item) {
				if (this.notClick) return
				uni.navigateTo({
					url: `/subPages/order/orderDetail?id=${item.id}`
				})
			},
			clickSlot(item, slotName) {
				this.$emit('slotClick', item, 'click' + slotName)
			},
			clickOutOrder(item) {
				this.$emit('projectOutOrder', item)
			},
			// 获取可评价技师列表
			clickToEvaluate(item) {
				let evaluateTechDetail = {}
				api_order.fetchEvaluateTech({
					orderId: item.orderId
				}).then(res => {
					if (res.code !== 200) return
					if (res.data.length > 1) {
						const aa = res.data.find(el => el.id == item.technicianId)
						evaluateTechDetail = encodeURIComponent(JSON.stringify(aa))
					} else {
						evaluateTechDetail = encodeURIComponent(JSON.stringify(res.data[0]))
					}
					uni.navigateTo({
						url: `/subPages/order/evaluate?id=${item.orderId}&evaluateTechDetail=${evaluateTechDetail}`
					})

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order-list-content {
		margin: 30rpx;

		.dataList {
			margin-bottom: 30rpx;
			background: #fff;
			border-radius: 17rpx;

			.bottom_con {
				display: flex;
				justify-content: flex-end;
				padding: 24rpx;
			}

			.dataList_title {
				font-size: 32rpx;
				font-weight: 600;
				letter-spacing: 0rpx;
				line-height: 46.34rpx;
				color: #333333;
				text-align: left;
				vertical-align: top;
				border-bottom: 1px solid #E6E6E6;
				padding: 24rpx;
				border-radius: 17rpx;
			}

			.give-money {
				display: flex;
				justify-content: space-between;
				align-items: center;

				border-bottom: none;
				height: 57rpx;
				padding: 24rpx;
			}

			.technicianList {
				padding: 24rpx;
				border-bottom: 1px solid #E6E6E6;

				.technicianName {
					font-size: 30rpx;
					font-weight: 600;
					letter-spacing: 0rpx;
					line-height: 43.44rpx;
					color: #333333;
					text-align: left;
					vertical-align: top;
				}

				.list_con {
					margin: 15rpx 0;
				}

				.img {
					width: 128rpx;
					height: 128rpx;
					margin-right: 24rpx;
				}
			}
		}
	}

	.out-money {
		margin-top: 10rpx;
	}
</style>